<template>
    <div style="font-size: 12px; line-height: 60px; display: flex;">
        <div style="flex: 1; font-size: 18px;">
            <span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
            <el-breadcrumb separator="/" style="display: inline-block;">
                <el-breadcrumb-item v-for="(item, index) in lists" :key="item.path">
                    <router-link :to="item.path">{{ item.meta.title }}</router-link>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div><el-dropdown style="width: 120px;cursor: pointer;">
                <div>
                    <img :src="user.avatar" style="width: 30px;border-radius: 50%;position: relative;top: 10px;right: 5px;">
                    <span>{{ user.name }}</span>
                    <i class="el-icon-arrow-down" style="margin-left: 5px;"></i>
                </div>
                <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center;">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>
                        <span style="text-decoration: none;">
                            <p @click="loginOut()">退出</p>
                        </span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown></div>
    </div>
</template>
<script>
import router from '@/router';

export default {
    name: "Header",
    props: {
        collapseBtnClass: String,
        collapse: Function
    },
    data() {
        return {
            lists: [],
            user: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
        };
    },
    created() {
        this.lists = this.$route.matched;
    },
    methods: {
        loginOut() {
            this.$router.push("/login")
            this.request.post("/sys/loginOut",);
            this.$message.success("退出成功")

            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');

        }
    },
    watch: {
        $route(to, from) {
            this.lists = to.matched;
        }
    },
    components: { router }
}

</script>